<template>
  <div>
    <img src="@/assets/btn.png" width="800" /> <br />
    当前用户的权限:{{ authorities }} <br /><br />
    <Authorized :authority="['role1']">
      <div class="table-operator">
        <a-button type="primary" @click="callFun1"
          >btn1 ['role1']看到
        </a-button>
      </div>
    </Authorized>
    <div class="table-operator">
      <a-button type="primary" v-auth="['role1', 'role2']" @click="callFun2"
        >btn2 ['role1', 'role2']看到
      </a-button>
    </div>
    <Authorized :authority="['role2']">
      比如当前用户没有role1权限,可用postman工具或浏览器中发请求测试:http://api.laithin.cn:8088/example/fun1
    </Authorized>
  </div>
</template>
<script>
import { fun1, fun2 } from "@/api/Fun3";
import { getCurrentAuthority } from "@/utils/auth";
export default {
  name: "authTest",
  data() {
    return {
      authorities: []
    };
  },
  created() {
    this.getAuth();
  },
  methods: {
    getAuth() {
      this.authorities = getCurrentAuthority();
    },
    callFun1() {
      fun1().then(response => {
        console.log(response);
      });
    },
    callFun2() {
      fun2().then(response => {
        console.log(response);
      });
    }
  }
};
</script>

<style scoped></style>
